<!--
 * @Author: your name
 * @Date: 2021-04-21 14:05:31
 * @LastEditTime: 2021-04-22 15:15:45
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /dvr-ui/src/components/same_video_show.vue
-->
<template>
  <div>
    <h1 class="centerText">当前搜索与id: {{useId}} 重复度</h1>
    <div class="centerText">下载当前 id 内容：
      <el-button type="primary"
                 @click="downloadTishV">视频<i class="el-icon-download el-icon--right"></i></el-button>
      <el-button type="primary"
                 @click="downloadAllTable">全部表格<i class="el-icon-download el-icon--right"></i></el-button>
      <el-button type="primary"
                 @click="downloadSameTable">高重复度表格<i class="el-icon-download el-icon--right"></i></el-button>
    </div>
    <h3 class="centerText">红色为高重复度视频</h3>
    <div>
      <template>
        <el-table :data="videoArr"
                  style="width: 100%;"
                  :row-class-name="tableRowClassName">
          <el-table-column label="视频 ID"
                           prop="id">
          </el-table-column>
          <el-table-column label="标题名称"
                           prop="vname">
          </el-table-column>
          <el-table-column label="标题类型"
                           prop="vtag">
          </el-table-column>
          <el-table-column label="汉明距离（越低相似度越高）"
                           prop="score">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini"
                         @click="downloadV(scope.$index,videoArr)">下载视频</el-button>
              <el-button size="mini"
                         @click="downloadI(scope.$index,videoArr)">下载关键帧</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

  </div>
</template>

<script>
import axios from 'axios'//引用axios
export default {
  computed: {
    useId () {
      return this.$route.query.userId
    }
  },
  data () {
    return {
      videoArr: [],
      simpleArr: [],
      thisVideo: {},
    }
  },
  methods: {
    init () {
      // 实现表格初始化
      let _this = this
      axios({
        headers: {
          'Content-type': 'charset=UTF-8'
        },
        method: 'post',
        url: 'http://localhost:8000/video/checkReVideo',
        data: { 'useId': _this.useId },
      }).then(function (response) {
        // 去除当前视频
        _this.dataInit(response)

      })

    },
    downloadTishV () {
      window.location.href = 'http://localhost:8000/media/video/' + this.thisVideo.fileName
    },
    downloadV (index, arr) {
      window.location.href = 'http://localhost:8000/media/video/' + arr[index].fileName
    },
    downloadSameTable () {
      let _this = this
      axios({
        headers: {
          'Content-type': 'charset=UTF-8'
        },
        method: 'post',
        url: 'http://localhost:8000/video/sameTable',
        data: { 'useId': _this.thisVideo.id },
      }).then(function () {
        // 下载关键帧
        window.location.href = 'http://localhost:8000/media/sameTable.xls'
      })
    },
    downloadAllTable () {
      let _this = this
      axios({
        headers: {
          'Content-type': 'charset=UTF-8'
        },
        method: 'post',
        url: 'http://localhost:8000/video/allTable',
        data: { 'useId': _this.thisVideo.id },
      }).then(function () {
        // 下载关键帧
        window.location.href = 'http://localhost:8000/media/allTable.xls'
      })
    },
    // 下载关键帧对应文件
    downloadI (index, arr) {
      axios({
        headers: {
          'Content-type': 'charset=UTF-8'
        },
        method: 'post',
        url: 'http://localhost:8000/video/downloadFrame',
        data: { 'useId': arr[index].id },
      }).then(function () {
        // 下载关键帧
        window.location.href = 'http://localhost:8000/media/keyFrames.xls'
      })
    },
    tableRowClassName (row) {
      if (row.row.score < 10) {
        return 'warning-row';
      }
    },
    // 数据初始化
    dataInit (response) {
      // 去除第一个元素
      let mArr = response.data.data.slice(1)
      this.thisVideo = response.data.data[0]
      for (let i = 0; i < mArr.length; i++) {
        if (mArr[i].vtag == '1') {
          mArr[i].vtag = '自制'
        } else {
          mArr[i].vtag = "转载"
        }
      }
      let sArr = []
      for (let i = 0; i < mArr.length; i++) {
        if (mArr[i].score < 10)
          sArr.push(mArr[i])
      }
      this.simpleArr = sArr;
      this.videoArr = mArr;
      console.log(this.simpleArr)
    }
  },
  mounted: function () {
    // 此处应当初始化发送axios请求，并且动态生成表格
    this.init()
  }

}
</script>

<style>
.centerText {
  text-align: center;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-table .warning-row {
  background: rgba(247, 2, 2, 0.185);
}
</style>